<template>
  <Page>
    <el-card :bordered="false">
      <Table
        :columns="columns"
        :request="hdlList"
        row-key="id"
        ref="tableRef"
        :actionColumn="actionColumn"
      >
        <template #tableTitle>
          <!-- 新增按钮 -->
          <el-button type="primary" @click="hdlOpen">
            <el-icon class="mr-1">
              <PlusOutlined />
            </el-icon>
            新增
          </el-button>
        </template>
      </Table>
    </el-card>

    <!-- 模态框组件 -->
    <modal ref="modalRef" :isEdit="isEdit" :record="dataForm" />
  </Page>
</template>

<script lang="ts" setup>
  import { h, nextTick, reactive, ref, unref } from 'vue';
  import { Table, TableAction, BasicColumn } from '@/design/components/Table';
  import { columns } from './columns';
  import api from '@/api/system/dept';
  import modal from './modal.vue';
  import { PlusOutlined } from '@vicons/antd';
  import { Page } from '@/design/components/Page';
  import { ElMessage } from 'element-plus';

  const modalMap = {
    create: '新增部门',
    update: '编辑部门',
  };

  // 设置操作菜单
  const actionColumn: BasicColumn = reactive({
    width: 190,
    label: '操作',
    prop: 'action',
    fixed: 'right',
    align: 'center',
    render({ row: record }) {
      return h(TableAction as any, {
        actions: [
          {
            label: '编辑',
            type: 'primary',
            link: true,
            onClick: hdlEdit.bind(null, record),
          },
          {
            label: '删除',
            isConfirm: true,
            type: 'primary',
            link: true,
            popConfirm: {
              title: '确定要删除此部门吗？',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              onConfirm: () => hdlDelete(record),
            },
          },
        ],
      });
    },
  });

  // 创建ref引用，用于获取Table组件实例
  const tableRef = ref();

  // 创建ref引用，用于获取Modal组件实例
  const modalRef = ref();

  // 是否处于编辑状态，默认为非编辑状态
  const isEdit = ref(false);

  const dataForm = ref({});

  /**
   * 获取列表数据
   */
  async function hdlList(res: any) {
    const _params = {
      ...res,
    };
    return await api.list(_params);
  }

  // 重新加载
  function reloadTable() {
    tableRef.value.reload();
  }

  // 新增操作
  function hdlOpen() {
    isEdit.value = false;
    dataForm.value = {};
    modalRef.value.setProps({ title: modalMap.create });
    modalRef.value.openModal();
  }

  // 编辑操作
  function hdlEdit(record: Recordable) {
    console.log(record);
    console.log(unref(record));
    modalRef.value.openModal();
    nextTick(() => {
      isEdit.value = true;
      dataForm.value = record;
      modalRef.value.setProps({ title: modalMap.update });
      modalRef.value.setFieldsValue({
        ...unref(record),
      });
    });
  }

  // 删除事件
  function hdlDelete(record: Recordable) {
    api.delete(record.id).then(() => {
      ElMessage.success('删除成功');
      reloadTable();
    });
    return;
  }
</script>

<style lang="scss" scoped>
  .tree-extra {
    position: absolute;
    right: 0;
  }
</style>
